<template>
  <a-card class="_mt-20" :bordered="false" title="公众号模板列表">
    <div slot="extra"><a-button type="primary" @click="handleUpd">更新模版消息</a-button></div>

    <s-table size="default" ref="table" :columns="columns" :data="loadData" :showPagination="false">
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <div slot="keywords" slot-scope="text, record">
        <template v-if="record.keywords">
          <a-tag v-for="(item, index) in Array.from(JSON.parse(record.keywords))" :key="index">{{ item }}</a-tag>
        </template>
      </div>
    </s-table>
  </a-card>
</template>
<script>
import { STable } from '@/components'
import { getMessageTemplateList, refreshTemplates } from '@/api/system/system'
export default {
  components: {
    STable
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '模板名称',
          dataIndex: 'templateName'
        },
        {
          title: '关键词',
          dataIndex: 'keywords',
          scopedSlots: { customRender: 'keywords' }
        },
        {
          title: '模版编码/描述',
          dataIndex: 'templateId'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime'
        },

        {
          title: '创建时间',
          dataIndex: 'createTime'
        }
      ],
      loadData: parameter => {
        return getMessageTemplateList().then(res => {
          return res
        })
      }
    }
  },
  methods: {
    async handleUpd() {
      await refreshTemplates()
      this.$refs.table.refresh(true)
      this.$message.success('刷新成功')
    }
  }
}
</script>
